<template>
  <div class="quesEditBox">

    <!--        题目题干编辑-->
    <div class="words">
      <span class="titleTip">问卷标题：</span>
      <el-input v-model="Ctitle"  type="textarea" :autosize="{ minRows: 1}"
                minlength="2"
                maxlength="20"
                show-word-limit
                class="titleWord"
      ></el-input>
    </div>

    <div class="optional" >
      <el-checkbox v-model="Cshowid"
      >批量添加题号
      </el-checkbox>
    </div>

    <div style="height: 50px;"
    >
      <el-checkbox style="margin-top:5px;line-height: 50px;" v-model="cifsetddl"
      >定时关闭
      </el-checkbox>
      <template v-if="cifsetddl">
          <el-date-picker
              v-model="cddl"
              type="datetime"
              placeholder="选择问卷关闭的日期时间"
              value-format="yyyy-M-d H:m:s"
              @change="changeDatePicker"
              style="margin:10px auto auto 20px"
          >
          </el-date-picker>
      </template>
    </div>

    <div style="height: 50px;margin-top: 20px;">

      <div class="words" style="height:30px;line-height: 30px;">
        <el-checkbox v-model="Conly" @change="setonly">是否限制每人只答一次</el-checkbox>
        </div>

      <div class="words" style="height:30px;line-height: 30px;">
        <el-checkbox v-model="Cconfirm" @change="setconfirm">是否限制登录才能答题</el-checkbox>
    </div>

<!--    <div style="height: 50px;margin-top: 20px;">-->

<!--      <div class="words" style="display: flex;height:30px;line-height: 30px;">-->
<!--        <div><el-checkbox v-model="CsetLimit">是否限制总答卷次数</el-checkbox></div>-->
<!--        <template v-if="setLimit">-->
<!--          <el-input-number v-model="climit" :min="0" size="mini"-->
<!--                           style="margin-left:10px;" @change="changeCLimit"-->
<!--          ></el-input-number>-->
<!--        </template>-->
<!--      </div>-->
    </div>



  </div>
</template>

<script>

import {questionnaireSetDeadline, setConfirmNeed, setIfOnlyAnswer} from "../../api";

export default {
  name:'ESetQn',
  data(){
    return {
      cddl:null,
      climit:1,
      cifsetddl:null,
      Conly:null,
      Cconfirm:null,
    }
  },
  props:{
    qnid:Number,
    showid:Boolean,
    title:String,
    tt:Number,
    ddl:Date,
    limit:Number,
    setLimit:Boolean,
    only:Boolean,
    confirm:Boolean,
  },
  computed:{

    CsetLimit:{
      get(){
        return this.setLimit;
      },
      set(){
        this.setLimit=!this.setLimit;
      }
    },
    Ctitle:{
      get(){
        return this.title;
      },
      set(v){
        this.$emit('changetitle',v);
      }
    },
    Cshowid:{
      get(){
        return this.showid;
      },
      set(v){
        this.$emit('setshowid',v);
      }
    },

  },
  mounted(){
    this.Conly=this.only;
    this.Cconfirm=this.confirm;
    this.climit=this.limit;
    if(this.ddl==null){
      this.cifsetddl=false;
    }else{
      this.cifsetddl=true;
      this.cddl=this.ddl;
    }
    console.log("WWWW",this.cifsetddl)
  },
  watch:{
    // tt(){
    //   this.$forceUpdate();
    // }
  },
  methods:{
    setonly:function (){
      setIfOnlyAnswer(this.qnid,this.Conly);
    },
    setconfirm:function (){
      setConfirmNeed(this.qnid,this.Cconfirm);
    },
    changeDatePicker:function (v){
      this.cddl=v;
      questionnaireSetDeadline(this.$store.state.uid,this.qnid,v).then(res=>{
        if(res.error_code==0){
          this.$notify({
            title:'成功设定问卷截止时间',
            message:'问卷截止时间为'+v,
            type:'success',
            position:"bottom-left"
          })
        }else{
          switch (res.error_code){
            case 2:this.notetwo();break;
            case 3:this.notethree();break;
            case 4:this.notefour();break;
          }
        }
      })
    },
    // error_code=2（用户不存在）的提醒
    notetwo(){
      this.$notify.error({
        message:'用户不存在',
      })
    },
    notethree(){
      this.$notify.error({
        message:'问卷不合法',
      })
    },
    notefour(){
      this.$notify.error({
        message:'时间不合法',
      })
    },
    changeCLimit:function (v){
      this.climit=v;
      this.$emit('changelimit',v);
    },

  }
}
</script>

<style scoped>
.quesEditBox{
  text-align: left;
  padding: 30px 5px 30px 5px;
}
.words{
  font-weight:bold;
  margin-top:5px;
  margin-bottom: 15px;
  display: flex;
}
.titleTip{
  font-size: 14px;
  width: 90px;
  height: 30px;
  line-height: 30px;

}
.optional{
  margin-top:15px;
}
.el-textarea >>> .el-textarea__inner{
  resize: vertical;
  padding: 5px 15px 0px 5px;
  line-height: 1.5;
  min-height: 30px !important;
  box-sizing: border-box;
  width: 100%;
  font-size: inherit;
  font-family: "微软雅黑 Light";
  color: black;
  background-color: transparent;
  background-image: none;
  border: none;
  border-bottom: 1px solid #DCDFE6;
  border-radius: 0px;
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
</style>